<template>
  <layout title="WeekCalendar周日历">
    <layout-content title="基础使用">
      <tn-week-calendar v-model="defaultCalendar"></tn-week-calendar>
    </layout-content>

    <layout-content title="设置默认值">
      <tn-week-calendar v-model="defaultValueCalendar"></tn-week-calendar>
    </layout-content>

    <layout-content title="设置对应日期显示信息">
      <tn-week-calendar v-model="customDateCalendar" :date-data="customDateData"></tn-week-calendar>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-week-calendar
        v-model="setColorCalendar"
        color="tn-color-grey"
        active-color="tn-color-indigo"
        active-bg-color="tn-bg-indigo--light"
      ></tn-week-calendar>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnWeekCalendar from '@/tuniao-ui/components/tn-week-calendar/src/WeekCalendar.vue'
import { WeekCalendarData } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

let defaultCalendar = ref<number>(0)
let defaultValueCalendar = ref<number>(7)
let customDateCalendar = ref<number>(1)
let setColorCalendar = ref<number>(0)

// 对应日期数据
const customDateData = reactive<WeekCalendarData[]>([
  { day: 1, content: '已签到' },
  { day: 2, content: '待签到' },
  { day: 3, content: '100积分' },
])
</script>

<style lang="scss" scoped>
</style>
